<template>
  <SearchCollapse :mixHeight="32">
    <el-form
      ref="searchRef"
      class="global-search-form"
      :inline="true"
      :model="formData"
    >
      <el-form-item label="" prop="keyword">
        <el-input
          v-model="formData.keyword"
          :placeholder="getKeywordTips"
          style="width: 360px"
        >
          <template #prepend>
            <el-select v-model="formData.keywordType">
              <el-option label="订单信息" value="order"></el-option>
              <el-option label="用户信息" value="user"></el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="state">
        <el-select v-model="formData.state" placeholder="售后状态">
          <el-option label="售后状态" value></el-option>
          <el-option
            v-for="item in selectStateOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="typeAppeal">
        <el-select v-model="formData.typeAppeal" placeholder="售后方式">
          <el-option label="售后方式" value></el-option>
          <el-option
            v-for="item in selectTypeOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #control>
      <el-button
        type="primary"
        :icon="Search"
        :loading="props.isLoading"
        @click="handleClickSearch"
        >查询</el-button
      >
      <PipeResetBtn :formEl="searchRef" @clear="handleClickSearch"
        >取消</PipeResetBtn
      >
    </template>
  </SearchCollapse>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import type { ElForm } from 'element-plus';
import { GetStateOptions } from '@/utils/common';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

// 路由
const route = useRoute();

// 售后方式
const selectTypeOpts = GetStateOptions('appeal-type-appeal');

// 售后状态
const selectStateOpts = GetStateOptions('appeal');

// 表单ref
const searchRef = ref<InstanceType<typeof ElForm>>();

// 查询数据
const formData = reactive({
  keywordType: 'order',
  keyword: '',
  typeAppeal: '',
  state: ''
});

// 描述提示
const getKeywordTips = computed(() => {
  if (formData.keywordType === 'order') return '订单编号/退款单号';
  if (formData.keywordType === 'user')
    return '昵称/姓名/手机号/OwnID/Unique';
  return '请输入关键词';
});

// props
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  }
});

// emits
const emits = defineEmits(['onSearch']);

// 搜索
const handleClickSearch = () => {
  // 获取查询条件
  const dataOpt: any = {};
  for (const [key, val] of Object.entries(formData)) {
    if (val !== '') dataOpt[key] = val;
  }

  emits('onSearch', dataOpt);
};

// 监听组件复用
onBeforeRouteUpdate((to) => {
  formData.state = (to?.query?.state as string) ?? '';
  handleClickSearch();
});

onMounted(() => {
  formData.state = (route?.query?.state as string) ?? '';
  handleClickSearch();
});
</script>
